<template>
  <div class="content">
    <Air title="地产详情"></Air>
    <el-row class="statement">
      <el-row class="top">
        <el-row>
          <h2>{{ propeDetails.title }}</h2>
        </el-row>
        <el-row type="flex">
          <el-row class="el-col el-col-12">
            <img ref="ImgSrc" :src="propeDetails.image" alt="" />
          </el-row>
          <el-row class="el-col el-col-12">
            <div @mouseleave="mouseleaveImg" style="display: flex">
              <div
                class="mini"
                v-for="(item, index) in propeDetails.photos"
                :key="index"
              >
                <img :src="item" alt="" @mouseover="mouseoverImg(item)" />
              </div>
            </div>
          </el-row>
        </el-row>
      </el-row>
      <el-row class="describe">
        <div v-html="propeDetails.content"></div>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getPropeDetailsApi } from "@/api/properties";
export default {
  data() {
    return {
      propeDetails: {},
    };
  },
  created() {
    console.log(this.$route.query);
    // let sta =  this.$route.query
    // if(sta.id){
    this.getPropeDetails(this.$route.query.id);
    // }
    // if(sta.agent){
    //   this.getPropeDetails('',{agent:sta.agent});
    // }
  },
  methods: {
    mouseleaveImg() {
      this.$refs.ImgSrc.src = this.propeDetails.image;
    },
    mouseoverImg(src) {
      // console.log(src)
      // console.log(this.$refs.ImgSrc)
      this.$refs.ImgSrc.src = src;
    },
    async getPropeDetails(id) {
      let { data } = await getPropeDetailsApi(id);
      console.log(data);
      this.propeDetails = data;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.statement {
  margin: 15px 0;
  border: 1px solid #ddd;
  padding: 10px 0;
  box-sizing: border-box;
  vertical-align: middle;

  .top {
    margin: 15px 0;
    .mini {
      width: 100px;
      height: 100px;
      object-fit: cover;
      margin: 10px;
      img {
        width: 100%;
        margin: 10px;
      }
    }
  }
}
/deep/.describe {
  border-top: 1px solid #ddd;
  vertical-align: middle;
}
</style>